<template>
  <div id="expert-box-container" class="container">
    <h2 class="msg" v-if="'Search' === dataSetType">资源库中的专家共 <span
        style="padding: 0 10px;">{{ $store.state.dbtotal.expert }}</span>人，为您找到相关专家有 <span
        style="padding: 0 10px;">{{ $store.state.searchResults.total }}</span>人 </h2>
    <h2 class="msg" v-if="'Favorite' === dataSetType">收藏的专家有 <span style="padding: 0 10px;">{{ dataSet.total }}</span>人
    </h2>
    <h2 class="msg" v-if="'Preselect' === dataSetType">预选的专家有 <span style="padding: 0 10px;">{{ dataSet.total }}</span>人
    </h2>
    <div class="expert-list clearfix">
      <draggable v-model="dataSet.data" chosenClass="chosen" force-fallback="true" ghostClass="ghost" group="expert"
                 animation="300" handle=".mover" @start="onDragStart" @end="onDragEnd">
        <transition-group appear mode="out-in" tag="ul">
          <li class="list-item" :key="'专家'+ index" :class="{'drag':drag}" v-for="(expert,index) in dataSet.data">
            <!-- 拖拽器 -->
            <span v-if="drag" class="mover"></span>
            <!-- 专家头像 -->
            <span class="img-wrapper" @click="look(expert)">
              <img class="expert-avatar" v-lazy="'api/img/expert/'+expert.expertId+'.png'"/>
            </span>
            <!-- 专家名字 -->
            <div class="name-wrapper" @click="look(expert)">
              <span :title="expert.expertName" class="expert-name" v-text="expert.expertName"/>
            </div>
            <!-- 浏览量 -->
            <el-tooltip content="浏览量">
              <span class="page-view icon-item">
                <img src="@/assets/svg/eye.svg" class="eye-svg svg-img"/>
                <span class="num" v-text="expert.visitsNum"/>
              </span>
            </el-tooltip>
            <!-- 领域、方向 -->
            <div class="expert-tags">
              <p class="expert-tag expert-domain"><i class="el-icon-reading"/>{{ expert.domain.domainName }}</p>
              <p class="expert-tag expert-direction"><i class="el-icon-position"/>
                <span v-if="expert.directions.length">
                  <span v-for="(direction,index) in expert.directions" :key="direction.directionId">
                    <span v-if="index!==expert.directions.length-1" :title="direction.directionName"
                          v-text="direction.directionName+'、'"/>
                    <span v-else :title="direction.directionName" v-text="direction.directionName"/>
                  </span>
                </span>
                <span v-else>-</span>
              </p>
            </div>
            <!-- 单位、职务 -->
            <div class="expert-currentPost-wrapper">
              <span class="expert-currentPost">
                <span v-if="expert.currentPost">
                  <!-- 单位 -->
                  <p  :title="expert.currentPost.split('、')[0].split('/')[0]"
                     v-text="expert.currentPost.split('、')[0].split('/')[0]" class="expert-honer"/>
                  <!-- 职务 -->
                  <p :title="expert.currentPost.split('、')[0].split('/')[1]"
                     v-text="expert.currentPost.split('、')[0].split('/')[1]" class="expert-honer"/>
                </span>
                <span v-else v-text="'-'"/>
              </span>
            </div>
            <!-- 收藏、预选 -->
            <div class="icon-wrapper">
              <!-- 收藏 -->
              <el-tooltip class="favorite" :content="expert.favorite? '取消收藏（数字：收藏量）': '添加收藏（数字：收藏量）'">
                <div class="icon-item" v-if="'Favorite'!==dataSetType"
                     @click="expert.favorite?removeFavorite(expert):addFavorite(expert)">
                  <!-- 已收藏 -->
                  <img class="favorite-svg svg-img" v-if="expert.favorite" src="@/assets/svg/favorite.svg"/>
                  <!-- 未收藏 -->
                  <img class="noFavorite-svg svg-img" v-else src="@/assets/svg/noFavorite.svg"/>
                  <span class="num" v-text="expert.favorsNum"/>
                </div>

                <!-- 已收藏（收藏列表 dataSetType === 'Favorite' ）：取消收藏需要确认 -->
                <div v-if="'Favorite'===dataSetType && expert.favorite">
                  <el-popconfirm
                      cancel-button-text='否'
                      cancel-button-type='否'
                      confirm-button-text='是'
                      confirm-button-type='danger'
                      icon="el-icon-delete"
                      icon-color="red"
                      title="取消收藏？"
                      @confirm="removeFavorite(expert)">
                    <div class="icon-item" slot="reference">
                      <!-- 已收藏 -->
                      <img class="favorite-svg svg-img" src="@/assets/svg/favorite.svg"/>
                      <span class="num" v-text="expert.favorsNum"/>
                    </div>
                  </el-popconfirm>
                </div>

                <div class="icon-item" v-if="'Favorite'===dataSetType && !expert.favorite" @click="addFavorite(expert)">
                  <!-- 未收藏 -->
                  <img class="noFavorite-svg svg-img" src="@/assets/svg/noFavorite.svg"/>
                  <span class="num" v-text="expert.favorsNum"/>
                </div>

              </el-tooltip>
              <!-- 预选 -->
              <el-tooltip :content="expert.preselect ? '取消预选': '添加预选'">
                <div class="no-preselected icon-item" v-if="!expert.preselect" @click.stop="addPreselect(expert)">
                  <img src="@/assets/svg/noChecked.svg" class="noChecked-svg svg-img"/>
                </div>
                <div class="preselected icon-item" v-else @click.stop="removePreselect(expert)">
                  <img src="@/assets/svg/checked.svg" class="checked-svg svg-img"/>
                </div>
              </el-tooltip>
            </div>
          </li>
        </transition-group>
      </draggable>
    </div>
    <div class="pagination" v-if="'Search' === dataSetType">
      <el-pagination
          :current-page="form.pageIndex + 1"
          :hide-on-single-page="true"
          :page-size="form.pageSize"
          :total="dataSet.total"
          background
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: "ExpertsBox",
  props: ["dataSetType", "drag"],
  components: {draggable},
  data() {
    return {};
  },
  watch: {
    drag() {
      if (!this.drag) {
        let id_list = []
        let dataSet = this.dataSet.data
        for (const data of dataSet) {
          id_list.push(data.expertId);
        }
        this.$store.commit("sort", ["expert", this.dataSetType, id_list]);
      }
    },
  },
  computed: {
    dataSet() {
      if ("Search" === this.dataSetType) {
        return this.$store.state.searchResults
      } else if ("Favorite" === this.dataSetType) {
        return this.$store.state.favoritesResults
      } else if ("Preselect" === this.dataSetType) {
        return this.$store.state.preselectResults
      } else {
        return {
          code: 200,
          msg: "dataSetType不存在",
          total: 0,
          pageSize: 0,
          pageCount: 0,
          pageIndex: 0,
          data: [],
        }
      }
    },
    form() {
      return this.$store.state.form;
    },
  },
  methods: {
    handleCurrentChange(currentPage) {
      console.log("当前页: ".concat(currentPage));
      const currentPageIndex = currentPage - 1;
      this.$store.commit("pageIndexChange", currentPageIndex)
      document.documentElement.scrollTop = 0
    },
    look(expert) {
      //拖拽 不跳转
      if (this.drag) {
        return
      }

      //浏览量统计
      this.$http.get("api/expert/visit?expertId=" + expert.expertId)

      //获取honor的正则映射表
      if (!this.regexMap) {
        this.$http.get("api/honor/getRegexMap")
            .then(res => {
              if (200 === res.data.code) {
                this.regexMap = res.data.data
              }
            })
      }

      //需要高亮的列表,['(...)','(...)','(...)','(...)']
      const highlight_list = [];

      //将“搜索框内容”放入“需要高亮的列表”
      if (this.$store.state.form.keyWord) {
        highlight_list.push("(" + this.$store.state.form.keyWord + ")")
      }
      const honor_list = this.$store.state.form.honor

      //将“honor的正则”放入“需要高亮的列表”
      for (const honor of honor_list) {
        if (honor_list.indexOf('全部') < 0) {
          const reg = this.regexMap[honor];
          if (reg) {
            highlight_list.push("(" + reg + ")")
          }
        }
      }

      //生成url
      let url = "./#/Expert/Info?id=" + expert.expertId;
      if (highlight_list.length > 0) {
        const highlightText = "(" + highlight_list.join("|") + ")";
        url += "&highlightText=" + highlightText
      }

      window.open(url, "_blank");
    },
    addFavorite(expert) {
      this.$store.commit("addFavorite", ["expert", expert]);
    },
    removeFavorite(expert) {
      this.$store.commit("removeFavorite", ["expert", expert]);
    },
    addPreselect(expert) {
      this.$store.commit("addPreselect", ["expert", expert]);
    },
    removePreselect(expert) {
      this.$store.commit("removePreselect", ["expert", expert]);
    },
    onDragStart() {
    },
    onDragEnd() {
    },
  },
  mounted() {
    if ("Search" === this.dataSetType) {
      const t = {
        searchType: "expert",
        pageIndex: 0,
        pageSize: 30,
        keyWord: "",
        region: ["全部"],
        domain: ["全部"],
        honor: ["全部"],
        meeting: ["全部"],
      };
      this.$store.commit("search", t);
    }
  },
}
</script>

<style scoped>
a, input, textarea {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: transparent;
  outline: none;
  resize: none;
  border: none;
  -webkit-font-smoothing: antialiased
}

body, button, input, select, textarea {
  font: 100%/1 Helvetica Neue, Helvetica, STHeiTi, Microsoft YaHei
}

#expert-box-container {
  min-width: 1240px;
  width: 1240px;
  position: relative;
  padding-bottom: 30px
}

.list-item {
  float: left;
  margin: 10px;
  transition: transform .3s, background-color .3s, opacity .3s;
  background-color: #fff;
  padding: 20px 20px 10px 20px;
  border: 1px solid rgba(48, 55, 66, .15);
  box-sizing: border-box;
  position: relative;
  display: inline-block
}

.drag {
  transition: transform 0s, background-color .3s;
  background-color: rgba(48, 137, 220, .1)
}

.chosen {
  border: 1px solid #3089dc !important
}

.ghost {
  background-color: rgba(48, 137, 220, .2) !important;
  opacity: .8 !important;
  transform: scale(.95) !important
}

.mover {
  display: block;
  cursor: move;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10
}

.list-item:hover {
  box-shadow: 0 1rem 2rem 0 rgba(48, 55, 66, .15);
  transform: translateY(-5px)
}

.list-item:hover .mover {
  display: block
}

.list-item .img-wrapper {
  position: relative;
  width: 184px;
  height: 184px;
  overflow: hidden;
  display: block;
  cursor: pointer
}

.list-item .expert-avatar {
  width: 184px;
  height: 184px;
  -o-object-fit: cover;
  object-fit: cover
}

.list-item .name-wrapper {
  position: relative;
  cursor: pointer;
  width: 184px;
  overflow: hidden
}

.list-item .name-wrapper .expert-name {
  font-size: 16px;
  color: #364044;
  margin: 20px 0 9px;
  display: inline-block;
  border-bottom: 1px solid transparent;
  height: 22px;
  overflow: hidden;
  text-overflow: ellipsis
}

.list-item .page-view {
  position: absolute;
  top: 206px;
  right: 8px;
  cursor: pointer
}

.list-item .page-view .num {
  padding-left: 20px
}

.list-item .page-view:hover {
  color: #4c93cf
}

.list-item .expert-tags .expert-tag {
  width: 184px;
  height: 19px;
  font-size: 12px;
  color: #9ea9aa;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.list-item .expert-tags .expert-tag i {
  margin-right: 5px;
  font-size: 16px;
  position: relative;
  top: 1px
}

.list-item .expert-tags .expert-domain {
  margin-bottom: 3px
}

.list-item .expert-tags .expert-direction {
  margin-bottom: 10px
}

.list-item .expert-honer-wrapper {
  width: 184px;
  height: 55px;
  border-left: 1px solid #959595;
  padding-left: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.list-item .expert-honer-wrapper .expert-honers {
  font-size: 14px;
  color: #717576;
  width: 184px;
  height: 16px
}

.list-item .expert-currentPost-wrapper {
  width: 184px;
  height: 55px;
  border-left: 1px solid #959595;
  padding-left: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.list-item .expert-currentPost-wrapper .expert-currentPost {
  font-size: 14px;
  color: #717576;
  width: 184px;
  height: 16px
}

.list-item .expert-currentPost-wrapper .expert-currentPost p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.icon-wrapper {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  cursor: default
}

.icon-item {
  color: #959595;
  font-size: 12px;
  cursor: pointer;
  padding: 4px
}

.icon-wrapper .favorite {
  overflow: hidden;
  margin-right: 6px
}

.icon-wrapper .favorite .num {
  padding-left: 20px
}

.icon-wrapper .favorite:hover .num {
  color: #4c93cf
}

.favorite-svg, .noFavorite-svg {
  margin-top: -2px
}

.icon-wrapper .no-preselected, .icon-wrapper .preselected {
  width: 16px;
  height: 16px;
  position: relative;
  bottom: 2px;
  margin-right: 4px
}

.icon-wrapper .preselected .el-icon-success, .icon-wrapper .preselected {
  color: #4c93cf
}

.icon-wrapper .preselected .el-icon-error {
  display: none;
  color: #cd5c5c
}

.icon-wrapper .preselected:hover .el-icon-success {
  display: none
}

.icon-wrapper .preselected:hover .el-icon-error {
  display: inline-block
}

.pagination {
  text-align: right
}

</style>
<style>
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #4c93cf;
  color: #fff
}
</style>